        <div class="card">
            <div class="card-header d-flex p-0">
                <ul class="nav nav-pills p-2">
                    <li class="nav-item"><a class="nav-link active" href="#tab_1" data-toggle="tab">基本信息</a></li>
                    <li class="nav-item"><a class="nav-link" href="#tab_2" data-toggle="tab">访问授权</a></li>
                </ul>
            </div><!-- /.card-header -->
            <div class="card-body p-0">
                <div class="tab-content">
                    <div class="tab-pane active" id="tab_1">
                        <form role="form">
                        <div class="card m-btm-0">
                            <div class="card-body">
                                <div class="form-group">
                                    <label for="name">角色名称</label>
                                    <input type="text" class="form-control" id="name" name="role_name" placeholder="">
                                </div>
                                <div class="form-group">
                                    <label for="description">角色描述</label>
                                    <input type="text" class="form-control" id="description" name="desc" placeholder="">
                                </div>
                                <div class="form-group">
                                    <label for="">角色状态</label>
                                    <div style="display: flex">
                                        <div class="custom-control custom-radio col-3">
                                            <input class="custom-control-input" type="radio" id="customRadio1" value="1" name="status" checked>
                                            <label for="customRadio1" class="custom-control-label">开启</label>
                                        </div>
                                        <div class="custom-control custom-radio col-3">
                                            <input class="custom-control-input" type="radio" id="customRadio2" value="0" name="status">
                                            <label for="customRadio2" class="custom-control-label">禁用</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </form>
                </div>
                    <!-- /.tab-pane -->
                    <div class="tab-pane" id="tab_2">
                        <div class="card m-btm-0" style="box-shadow:none !important;">
                            <div class="card-body">
                                <ul id="tree" class="ztree" style="width:230px; overflow:auto;"></ul>
                            </div>
                        </div>

                    </div>
                    <!-- /.tab-pane -->
                </div>
                <!-- /.tab-content -->
            </div><!-- /.card-body -->
            <div class="card-footer">
                <button type="button" id="submit" class="btn btn-primary">添加</button>
            </div>
        </div>

<script>
    function pageJs( layero, index ) {
        var zTreeObj,
            setting = {
                check: {
                    enable: true
                },
                async: {
                    enable: true,
                    contentType: "application/json",
                    url: "{:url('admin/menu/jsonMenuData')}",
                    autoParam: ["id", "name"]
                },
                view: {
                    selectedMulti: false,
                    txtSelectedEnable: true
                }
            };
        zTreeObj = $.fn.zTree.init($(layero).find("#tree"), setting, []);


        $(layero).find("#submit").on('click', function () {
            var formData = new FormData($(layero).find('form')[0]),
                nodes = zTreeObj.getChangeCheckedNodes();
            if ( !nodes.length ) {
                popupBox( getMsgBox( {msg:'请选择菜单权限'}, 'danger' ) );
                return false;
            } else {
                $(nodes).each(function (k,v) {
                    formData.append( 'ids[]', v.id );
                });
            }

            $.ajax({
                cache: true,
                type: "POST",
                url:"{:url('admin/role/doAdd')}",
                data:formData,
                dataType:'json',
                processData : false,
                async: true,
                contentType: false,
                error:function(XMLHttpRequest, textStatus, errorThrown){
                    // alert(textStatus);
                },
                success: function( response ) {
                    var code = parseInt( response.error_code );
                    switch (code) {
                        case 1:
                            popupBox( getMsgBox( {'success': response.msg}, 'success' ), function (alert_layero, alert_index) {
                                setTimeout(function () {
                                    layer.close( alert_index )
                                }, 600);
                            } );

                            setTimeout(function () {
                                layer.close( index );
                                location.reload();
                            }, 800);
                            break;
                        case 10000:
                            popupBox( getMsgBox( response.msg, 'danger' ) );
                            break;
                        default:
                            popupBox( getMsgBox( {msg:'操作出现问题了'}, 'danger' ) );
                    }
                }
            });
        });
    }
</script>
